<template>
	<view class=" allhw list-view">
		<view v-if="chatList.length > 0">
			<!-- 	[{
				id:1,
				name:'波多野溪子',
				nickName:'波多野溪子',
				avatar:'https://cdn.quasar.dev/img/avatar.png',
				type:ImEnum.OtherEnum.USER_TYPE.USER,
				unReadCount :1,
				lastChatTime:'10:22',
				lastChatContent:"你好啊，傻逼",
			}] -->
			<block v-for="(item, index) in chatList" :key="index">
				<tui-swipe-action :actions="swipeActions" @click="deleteChat(index)">
					<template v-slot:content>
						<view class="tui-list-item" @click="detail(item)">
							<tui-badge absolute right="82vw" top="1rpx" :scaleRatio="0.8" type="danger" v-if="item.unReadCount > 0">
								{{ item.unReadCount <= 99 ? item.unReadCount : '99+' }}
							</tui-badge>
							<image :src="item.avatar" class="tui-img"></image>
							<view class="item-box">
								<view class="item-title">{{ item.nickName }}</view>
								<view class="item-time text-cut">{{ item.lastSender ? item.lastSender + '：' : '' }}{{ item.lastChatContent }}</view>
							</view>
							<view class="tui-msg-right tui-right-dot">
								<view class="item-time">{{ item.lastChatTime }}</view>
							</view>
						</view>
					</template>
				</tui-swipe-action>
				<tui-divider height="1" color="black"></tui-divider>
			</block>
		</view>
		<!-- 没有会话 -->
		<tui-no-data class="im-nodata" @click="toContactFu" v-else imgUrl="/static/img/img_nodata.png" btnText="创建会话" btnColor="#4caf50">暂无会话</tui-no-data>
	</view>
</template>

<script>
import {
	mapGetters
} from 'vuex'
import ImEnum from '../../../sdk/enums/index.js'
export default {
	props:{
		searchKey:{
			type: String,
			default:''
		}
	},
	data() {
		return {
			chatType:ImEnum.OtherEnum.USER_TYPE.USER,
			chatList:[],
			swipeActions:[
				{
					name:'删除',
					color:'white',
					fontsize:'30rpx',
					width:'80',
					background:'red'
				}
			]
		}
	},
	computed: {
		chatListTemp() { //获取会话列表
			return this.$store.getters.chatListGetter
		}
	},
	created() {
			this.setChatListData(this.chatListTemp)
	},
	watch:{
		searchKey(newValue,oldValue){
			if(newValue !== oldValue){
				this.searchKey = newValue
				this.setChatListData(this.chatListTemp)
			}
		}
	},
	methods: {
		setChatListData(data){
			let temp = new Array()
			if(this.searchKey&&this.searchKey!==''&&data){
				data.forEach(item =>{
					let nickName = item.nickName
					let name = item.name
					if(nickName.indexOf(this.searchKey)>-1||name.indexOf(this.searchKey)>-1){
						temp.push(item)
					}
				})
			}else{
				temp = data
			}
			this.chatList = temp
			return data
		},
		toContactFu() {
			uni.redirectTo({
				url: '/pages/contacts/contacts'
			});
		},
		detail(obj){
			uni.navigateTo({
				url: '/pages/inChat/inChat?userInfo='+encodeURIComponent(JSON.stringify(obj))
			});
		},
		deleteChat(obj){
			const that_ = this
			uni.showModal({
			    title: '提示',
			    content: '删除‘'+that_.chatList[obj].nickName+'’？',
			    success: function (res) {
			        if (res.confirm) {
			           that_.$store.dispatch("removeChat",obj)
					  uni.showToast({
					      duration: 1000
					  });
			        } else if (res.cancel) {
			        }
			    }
			});
		}
	}
}
</script>

<style scoped>
.im-nodata {
	position: absolute;
	z-index: 2;
	top: 50vh;
}

.tui-list-item {
	padding: 10rpx 10rpx;
	display: flex;
	align-items: item;
}

.item-img {
	height: 80rpx;
	width: 80rpx;
	display: block;
}

.item-box {
	margin-left: 30rpx;
	flex: 1;
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.item-title {
	font-size: 30rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.item-time {
	color: #999;
	font-size: 20rpx;
}
</style>
